﻿<template>
  <div class="container" style="width:99%;margin-top:-25px;">
    <!-- 查询条件 -->
    <div class="query-box">
      <el-form :model="queryBox" status-icon ref="queryBox">
        <el-row>
          <el-col :span="4">
            <el-form-item label prop="code">
              <el-input v-model="queryBox.orderId" placeholder="订单号">
                <template slot="prepend">订单号</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <div class="depart-box">
              <div class="slect-title">成单产品</div>
              <el-select
                filterable
                clearable
                v-model="queryBox.product"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in order_product_options"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                  >{{ item.value }}</el-option
                >
              </el-select>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="depart-box">
              <div class="slect-title">成单时间</div>
              <el-date-picker
                v-model="createDate"
                type="daterange"
                :start-placeholder="'开始时间'"
                :end-placeholder="'结束时间'"
                range-separator="至"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="depart-box">
              <div class="slect-title">订单状态</div>
              <el-form-item>
                <el-select
                  clearable
                  v-model="queryBox.isReturn"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in order_status_options"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key"
                    >{{ item.value }}</el-option
                  >
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="depart-box">
              <div class="slect-title">资源提供类别</div>
              <el-select
                filterable
                clearable
                @change="provideTypeChange"
                v-model="provideType"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in provideType_options"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                  >{{ item.value }}</el-option
                >
              </el-select>
              <div v-if="provideType == 2">
                <el-autocomplete
                  v-model="branchCenterName"
                  :fetch-suggestions="querySearchAsync"
                  placeholder="分中心"
                  @select="handleSelect"
                  clearable
                  style="width: 100% !important"
                  :change="handleClearable()"
                ></el-autocomplete>
              </div>
              <div v-if="provideType == 3">
                <el-autocomplete
                  style="width: 100% !important"
                  v-model="userName"
                  :fetch-suggestions="querySearchAsync2"
                  placeholder="请输入大区经理"
                  clearable
                  @select="handleSelect2"
                  :change="handleClearable2()"
                ></el-autocomplete>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="depart-box">
              <div class="slect-title">确认收款时间</div>
              <el-date-picker
                v-model="receivablesDate"
                type="daterange"
                :start-placeholder="'开始时间'"
                :end-placeholder="'结束时间'"
                range-separator="至"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </div>
          </el-col>
           <el-col :span="6">
            <div class="depart-box">
              <div class="slect-title">确认返款时间</div>
              <el-date-picker
                v-model="refundsDate"
                type="daterange"
                :start-placeholder="'开始时间'"
                :end-placeholder="'结束时间'"
                range-separator="至"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </div>
          </el-col>
        </el-row>
        <el-row> </el-row>
      </el-form>
      <div class="from-btns">
        <kt-button
          :label="$t('action.reset')"
          perms="true"
          type="primary"
          @click="reset('queryBox')"
        />
        <kt-button
          :label="$t('action.search')"
          perms="true"
          type="primary"
          @click="search"
        />
      </div>
    </div>
    <div class="add-btns fl">
      <kt-button
        :label="$t('导出')"
        perms="customerSea:student:export"
        type="primary"
        @click="handleExport"
        style="float:left;"
      />
    </div>
    <!--表格内容栏-->

    <Crm-table
      ReturnRecord
      class="table-width"
      permsEdit="Financial:ReturnRecord:isRefunds"
      width="400"
      permsSee="true"
      @handleEdit="handleEdit"
      :data="pageResult"
      :columns="columns"
      :loading="loading"
      @findPage="findPage"
    ></Crm-table>
  </div>
</template>
<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import KtButton from "@/views/Core/KtButton";
import CrmTable from "@/views/Core/CrmTable";
import CrmSwitch from "@/views/Core/CrmSwitch";
import { baseUrl } from "@/utils/global";
import axios from "axios";
import Cookies from "js-cookie";
export default {
  name: "Student",
  components: {
    PopupTreeInput,
    CrmTable,
    KtButton,
    CrmSwitch
  },
  data() {
    return {
      isShowFlag: 0, //0:初始化部门、人员不显示  1:部门显示 2：人员显示
      aa: true,
      checkedPeson: 0,
      size: "small",
      // 查询条件
      student_data_from_options: [
        {
          label: " ",
          key: " "
        }
      ],
      grade_cache_gradeOptions: [],
      student_type_options: [],
      collection_options: [
        {
          value: "是",
          key: "1"
        },
        {
          value: "否",
          key: "2"
        }
      ],
      student_data_from_type_options: [
        {
          label: " ",
          key: " "
        }
      ],
      provideType_options: [
        {
          value: "分中心",
          key: "2"
        },
        {
          value: "大区经理",
          key: "3"
        }
      ],
      provideType: "",
      student_import_department: [],
      queryBox: {
        name: "",
        dataFrom: "",
        type: "",
        dataFromType: "",
        progress: "",
        code: "",
        phone: "",
        school: "",
        providerTeacher: "",
        belongToAgent: "",
        createDate: "",
        moveDate: "",
        belongToPerson: "",
        pageNum: 0,
        pageSize: 0,
        importDepartment: "",
        isReturn:'',
        product:''
      },
      width: 200,
      columns: [
        { type: "index", label: "序号", minWidth: 50 },
        { prop: "orderId", label: "订单号", minWidth: 120 },
        { prop: "product", label: "成单产品", minWidth: 100 },
        { prop: "money", label: "成单金额", minWidth: 70 },
        { prop: "classNum", label: "课时数", minWidth: 80 },
        { prop: "studentName", label: "学生姓名", minWidth: 120 },
        { prop: "studentCode", label: "客户编号", minWidth: 120 },
        { prop: "signDate", label: "成单时间", minWidth: 140 },
        { prop: "receivablesDate", label: "确认收款时间", minWidth: 140 },
        { prop: "isReturnStr", label: "订单状态", minWidth: 70 },
        { prop: "provider", label: "资源提供类别", minWidth: 100 },
        { prop: "belongToAgent", label: "资源提供者编码", minWidth: 120 },
        { prop: "belongToAgentStr", label: "资源提供者名称", minWidth:220 },
        { prop: "devidedInfo", label: "分成比例", minWidth: 70 },
        { prop: "devidedMoney", label: "分成金额", minWidth: 70 },
        { prop: "isRefunds", label: "是否返款", minWidth: 70 },
        { prop: "refundsDate", label: "确认返款时间", minWidth: 140 },
      ],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {
        content: []
      },
      student_type_options: [],
      operation: true, // true:新增, false:编辑
      batchdistribution: false, //显示批量分配弹窗
      customerownership: false, //显示客户归属弹窗
      selectionsLength: "",
      deptTreeProps: {
        label: "name",
        children: "children"
      },
      roles: [],
      selections: [], //选中列表集合
      ids: [], //分配ID集合
      ids2: [],
      deptData: [], //部门树
      deptTree: {
        label: "deptName",
        children: "children"
      },
      deptinputValue: "",
      // 划分方式
      deptmodeoptionsValue: "",
      submitID: "",
      deptId: "",
      userID: "", //人员ID
      deptuseroption: [], //部门用户
      deptuseroptionValue: "",
      branchcenter: [], //分中心下拉
      branchcenterValue: "",
      branchcenterValueID: "",
      branchcenterCodeValue: "", //分中心编码
      addstuformData: {},
      student_type_options: [],
      trackingDate: "",
      createDate: "",
      loading: false,
      gradeCache: "",
      deptData: [], //部门树
      deptTree: {
        label: "deptName",
        children: "children"
      },
      deptinputValue: "",
      userName: "",
      branchCenterName: "",
      selections: [], //选中列表集合
      batchdistribution: false, //显示批量分配弹窗
      resources_Options: [],
      order_status_options: [
        {
          value: "已成单",
          key: "2"
        },
        {
          value: "已退单",
          key: "1"
        }
      ],
      order_product_options: [],
      student_progress_change: [],
      receivablesDate:'',
      refundsDate:''
    };
  },
  methods: {
    // 搜索
    search() {
      this.loading = true;
      this.queryBox.createDateStart = this.createDate[0];
      this.queryBox.createDateEnd = this.createDate[1];
      this.queryBox.receivablesDateStart=this.receivablesDate[0]
      this.queryBox.receivablesDateEnd=this.receivablesDate[1]
      this.queryBox.refundsDateStart=this.refundsDate[0]
      this.queryBox.refundsDateEnd=this.refundsDate[1]
      this.pageRequest.pageNum = 1;
      // if (this.provideType != "") {
      //   if (this.queryBox.belongTo == "" || this.queryBox.providerAgent == "") {
      //     this.$message({
      //       type: "warning",
      //       message: "请输入大区经理或分中心名称！"
      //     });
      //     this.loading = false;
      //     return;
      //   } else {
      //     this.findPage(null);
      //   }
      // }
      if (this.provideType ==2&&this.queryBox.belongToAgent=='') {
       
          this.$message({
            type: "warning",
            message: "请输入分中心名称！"
          });
          this.loading = false;
          return;
        
        
      }
       if (this.provideType ==3&&this.queryBox.belongToAgent=='') {
       
          this.$message({
            type: "warning",
            message: "请输大区经理名称！"
          });
          this.loading = false;
          return;
        
        
      }
      this.findPage(null);
    },
    // 获取分页数据
    findPage: function(data) {
      if (data !== null) {
        this.loading = true;
        this.pageRequest = data.pageRequest;
      }
      this.queryBox.pageSize = this.pageRequest.pageSize;
      this.queryBox.pageNum = this.pageRequest.pageNum;
      this.queryBox.queryInterface = 1;
      this.$api.student
        .studentSignList(this.queryBox)
        .then(res => {
          let content = {
            content: res.listStudentSignInfo,
            totalSize: res.total
          };
          this.pageResult = content;
          this.pageResult.content.forEach(item => {
            // if (item.isReturn == 1) {
            //   item.isReturn = "已退单";
            // } else {
            //   item.isReturn = "已成单";
            // }
            if (item.isRefunds == '是') {
              item.isRefunds2 = "2";
            } else {
              item.isRefunds2 = "1";
            }
            if (item.provider == 2) {
              item.provider = "分中心";
            } else if (item.provider == 3) {
              item.provider = "大区经理";
            }
            this.order_product_options.forEach(type_item => {
              if (type_item.key == item.product) {
                item.product = type_item.value;
              }
            });
          });
          this.loading = false;
        })
        .then(data != null ? data.callback : "");
    },
    // 重置
    reset(queryBox) {
      this.$refs.queryBox.resetFields();
      this.queryBox.orderId = "";
      this.queryBox.dataFrom = "";
      this.queryBox.progress = "";
      this.queryBox.product = "";
      this.queryBox.belongToAgent = "";
      this.createDate = "";
      this.trackingDate = "";
      this.queryBox.dataFromType = "";
      this.queryBox.createDateStart = "";
      this.queryBox.createDateEnd = "";
      this.queryBox.trackingDateStart = "";
      this.queryBox.trackingDateEnd = "";
      this.queryBox.receivablesDateStart=''
      this.queryBox.receivablesDateEnd=''
      this.queryBox.refundsDateStart=''
      this.queryBox.refundsDateEnd=''
      this.receivablesDate='',
      this.refundsDate=''
      this.selectedOptions = [];
      this.queryBox.province = "";
      this.queryBox.isReceivables = "";
      this.queryBox.isReturn = "";
      this.pageRequest.pageNum = 1;
      this.queryBox.phone = "";
      this.queryBox.belongTo = "";
      this.userName = "";
      this.branchCenterName = "";
      this.queryBox.dataFromGroupKey = "";
      this.queryBox.importDepartment = "";
      this.queryBox.isTmkContacted = "";
      this.provideType = "";
      this.loading = true;
      this.findPage(null);
    },

    // 确认返款
    handleEdit: function(params) {
      this.$confirm("该笔订单是否已经收到款项？", "确认收款", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      }).then(() => {
        this.$api.student
          .receivablesOrRefunds({
            id: params.row.id,
            isRefunds: params.row.isRefunds2
          })
          .then(res => {
            if (res.result == 1) {
              this.$message({
                type: "success",
                message: res.msg
              });
              this.findPage(null);
            } else {
              this.$message({
                type: "error",
                message: res.msg
              });
              this.findPage(null);
            }
          });
      });
    },

    // 导出
    handleExport() {
      axios({
        method: "get",
        url: baseUrl + "/studentSign/exportMoneyBack",
        params: this.queryBox
      }).then(res => {
        window.open(res.request.responseURL);
      });
    },

    // 获取选中的表格数据
    selectionChange: function(selections) {
      this.selections = selections.selections;
    },
    // 获取成单产品
    get_order_product() {
      this.order_product_options = JSON.parse(
        localStorage.getItem("orderPoductOptions")
      );
    },
    provideTypeChange() {
      this.queryBox.belongTo = "";
      this.queryBox.providerAgent = "";
    },
    // 分中心远程搜索
    querySearchAsync(queryString, callback) {
      let restaurants = [{}];
      let results = "";
      this.$api.dropdown.branchcenter().then(res => {
        for (let i of res.branchCenterInfoList) {
          i.value = i.name; //将想要展示的数据作为value
        }
        restaurants = res.branchCenterInfoList;
        results = queryString
          ? restaurants.filter(this.createFilter(queryString))
          : restaurants;
        callback(results);
      });
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    // 搜索所属分中心
    handleSelect(item) {
      this.queryBox.belongToAgent = item.id;
    },
    handleClearable(value) {
      if (this.branchCenterName == "") {
        this.queryBox.belongToAgent = "";
      }
    },
    handleClearable2(value) {
      if (this.userName == "") {
        this.queryBox.belongToAgent = "";
      }
    },
    // 所属销售搜索
    querySearchAsync2(queryString, callback) {
      let restaurants = [{}];
      let results = "";
      let threeId = JSON.parse(Cookies.get("threeLevelDeptId"));
      if (threeId == null) {
        this.$api.dropdown
          .users({ twoLevelDeptId: "307914448319033347" })
          .then(res => {
            for (let i of res.userInfoList) {
              i.value = i.realName; //将想要展示的数据作为value
            }
            restaurants = res.userInfoList;
            results = queryString
              ? restaurants.filter(this.createFilter2(queryString))
              : restaurants;
            callback(results);
          });
      } else {
        this.$api.dropdown
          .users({ userType: 3, deptType: 1, threeLevelDeptId: this.deptId })
          .then(res => {
            for (let i of res.userInfoList) {
              i.value = i.realName; //将想要展示的数据作为value
            }
            restaurants = res.userInfoList;
            results = queryString
              ? restaurants.filter(this.createFilter2(queryString))
              : restaurants;
            callback(results);
          });
      }
    },
    createFilter2(queryString) {
      return restaurant => {
        return (
          restaurant.realName
            .toLowerCase()
            .indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    handleSelect2(item) {
      this.queryBox.belongToAgent = item.id;
    }
  },
  mounted() {
    this.get_order_product();
  }
};
</script>
<style>
@import url("../../assets/queryBox.css");
</style>
<style lang="scss" scoped>
.checked-person {
  display: block;
  float: left;
  margin-top: -10%;
  margin-left: 35%;
}
.batchdistribution-pop-tit {
  font-size: 20px;
  font-weight: bold;
  display: inline-block;
  color: #303133;
}
.checked-person {
  font-weight: 500;
  display: inline-block;
  text-align: center;
  margin: 3% 0 3% 40%;
}
.batchdistribution-pop-tit {
  font-size: 20px;
  font-weight: bold;
  display: inline-block;
  color: #303133;
}
.demo-form-inline {
  width: 90%;
  margin: 0 auto;
  .el-dialog__body .el-input {
    width: 93% !important;
  }
  .el-select {
    width: 100% !important;
  }
  .tit {
    display: inline-block;
    margin-top: 10%;
  }
}
.el-dialog__wrapper .el-form-item__content {
  margin-left: 0;
}
</style>
<style lang="scss">
.batchdistribution-pop {
  .el-dialog__header {
    text-align: left;
    margin-left: 10%;
    font-weight: bold;
  }
}
.batchdistribution-pop .el-dialog__header {
  padding: 0 0 0 0 !important;
}
.batchdistribution-pop .el-autocomplete {
  width: 100% !important;
}
</style>
